<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel" :oktext="$ti18('rxForm.saveBtn','保存')" order="top" btnalign="right" class="rxDialogsbox-edit">
        <div style="z-index: 999" slot="toolbar">
                <a-form-model ref="form" layout="inline" :model="mdl" :rules="rules">
                    <a-row :gutter="24">
                        <a-col span="8">
                            <a-form-model-item :label="$ti18('rxForm.name','名称') " prop="name">
                                <a-input  @blur.native="getPinyinByName" :placeholder="$ti18('rxForm.name','名称','','input')" v-model="mdl.name"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col span="8">
                            <a-form-model-item :label="$ti18('rxForm.rxAlias','别名') " prop="alias">
                                <a-input :placeholder="$ti18('rxForm.rxAlias','别名','','input') " v-model="mdl.alias"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col span="8">
                            <a-form-model-item :label="i18n('form.classify','分类')" prop="category">
                                <rx-category-select v-model="mdl.category" cat-key="FORM" :isGrant="true"></rx-category-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
        </div>
        <rx-layout class="formCustomized">
            <div slot="center">
                <div class="formCustomized-common" >
                    <div v-show="config.reportType!='customChart'" style="overflow: auto">
                        <chart-model ref="chartModel"
                                     :config="config"
                                     @getDataModel="getDataModel"
                                     :modelConfig="modelConfig"
                                     @setModelConfig="setModelConfig"

                        ></chart-model>
                    </div>
                    <div class="rxDialogsbox-edit-tab">
                        <a-tabs default-active-key="1" size="small">
                            <a-tab-pane key="1" :tab="i18n('form.basicSet','基础设置')" v-if="config.reportType!='customChart'">
                                <BasicsConfig :config="config" @setConfig="setConfig"></BasicsConfig>
                            </a-tab-pane>
                            <a-tab-pane key="2" :tab="i18n('form.attrSet','属性设置')">
                                <PropertySetting :config="config" @setPropertySetting="setPropertySetting"></PropertySetting>
                            </a-tab-pane>
                            <a-tab-pane key="3" :tab="i18n('form.advanceSet','高级设置')" v-if="config.reportType!='customChart'">
                                <ChartAdvConfig :chartConfig="config" @setConfig="setConfig"></ChartAdvConfig>
                            </a-tab-pane>
                        </a-tabs>
                    </div>
                    <div class="chart-view-common">
                        <div class="chart-view-common-type">
                            <div :class="config.reportType ==obj.key?'chart-view-common-show chart-view-common-type-list':'chart-view-common-type-list'" v-for="obj in reportTypes" :key="obj.key" @click="setReportType(obj.key)">
                                <div v-if="config.reportType ==obj.key" class="dragiconfont"><i class="iconfont iconright"></i></div>
                                <img :src="obj.img"/>
                                <span :title="obj.name">{{ obj.name }}</span>
                            </div>
                        </div>
                        <div class="chart-view-config">
                            <chart-view :config="config"></chart-view>
                        </div>
                    </div>
                </div>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import FormChartComponentApi from '@/api/form/core/formChartComponent';
import ChartModel from '@/views/modules/form/core/FormChartComponent/ChartModel.vue';
import BasicsConfig from '@/views/modules/form/core/FormChartComponent/BasicsConfig.vue';
import PropertySetting from '@/views/modules/form/core/FormChartComponent/PropertySetting.vue';
import ChartAdvConfig from '@/views/modules/form/core/FormChartComponent/ChartAdvConfig.vue';
import {RxDialog, BaseFormModel,Util} from "@lowcode/jpaas-common-lib";
import ChartDataModelApi from "@/api/form/core/chartDataModel";
import ChartView from "@/views/modules/form/core/formComponent/ChartView.vue";

export default {
    name: 'FormChartComponentEdit',
    mixins: [BaseFormModel],
    components: {
        RxDialog,
        ChartModel,
        BasicsConfig,
        PropertySetting,
        ChartAdvConfig,
        ChartView
    },
    data() {
        return {
            /**
             * 子表列表，以及表格属性
             */
            subTable: {},
            rules: {
                name: [{required: true, message: this.$ti18('rxForm.name','名称','','input'), trigger: 'change'}],
                alias: [
                    {required: true, message: this.$ti18('rxForm.rxAlias','别名','','input') , trigger: 'change'},
                    {pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/,message:this.i18n2('form.str','不能以数字开头,不能包含【_-】以外的特殊字符！','input')}
                ],
                category: [{required: true, message: this.i18n('form.classify','分类','select'), trigger: 'change'}],
                dataModel: [{required: false, message: this.i18n('form.dataModel','数据模型','input') + "ID", trigger: 'change'}],
                dataModelName: [{required: false, message: this.i18n('form.modelName','数据模型名称','input'), trigger: 'change'}],
                config: [{required: false, message: this.i18n('form.config','配置','input'), trigger: 'change'}],
            },
            config:{},
            defConfig: {
                alias:"chart_"+Util.randomId(),
                showName:true,
                //数据模型
                dataModel: "",
                dataModelName: "",
                //类型
                reportType: "bar",
                //维度
                dimensions: [],
                // 度量
                measures: [],
                //度量（多Y轴情况)
                measureList: [],
                //颜色图例
                colorLegends: [],
                //过滤条件
                filterParams: [],
                //自定义颜色
                colour:{
                    value:1,
                    content:['#3fb1e3','#6ae6c2','#9fa7e6','#c4eaad','#94dee7','#626c90']
                },
                //仪表盘颜色配置
                gaugeColours:[],
                //高级配置
                advConfig:{
                    saveAsImage:false,
                    legendShow:false,
                    legendTop:"top",
                    legendLeft:"left",
                    formatter:'',
                    linkage:false,
                    smooth:false,
                    min:0,
                    max:100,
                    fontSize:20,
                    magicType:false,
                    restore:false,
                    xAxisColor:'#333',
                    joinMeasure:true,
                    titleLeft:"left",
                    sort: 'descending',//descending(降序) ascending(升序)
                },
                receive:{
                    publishComponent:"",
                    mapping:[]
                },
                publish:{
                    paramMapping:[]
                }
            },
            modelConfig:{}, //数据模型配置
            reportTypes: [
                {name: this.i18n('list.barChart','柱状图'), key: "bar", img: require('@/../static/img/bar.png')},
                {name: this.i18n('list.lineChart','折线图'), key: "line", img: require('@/../static/img/line.png')},
                {name: this.i18n('list.pieChart','饼图'), key: "pie", img: require('@/../static/img/pie.png')},
                {name: this.i18n('list.panel','仪表盘'), key: "gauge", img: require('@/../static/img/gauge.png')},
                {name: this.i18n('list.lineCol','线柱混搭'), key: "lineBar", img: require('@/../static/img/lineBar.png')},
                {name: this.i18n('list.funnel','漏斗图'), key: "funnel", img: require('@/../static/img/funnel.png')},
                {name: this.i18n('list.map','地图'), key: "map", img: require('@/../static/img/map.png')},
                {name: this.i18n('list.radarMap','雷达图'), key: "radar", img: require('@/../static/img/radar.png')},
                {name: this.i18n('list.customize','自定义'), key: "customChart", img: require('@/../static/img/module-chart.png')}
            ],
        }

    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartComponent", key);
        },
        i18n2(name,text,key){
            return this.$ti18(name,text,"formBoEntity",key);
        },
        onload_(values){
            if(!values || !values.config){
                this.config=this.defConfig;
            }else {
                this.config=JSON.parse(values.config);
            }
        },
        getPinyinByName(){
            let name=this.mdl.name
            if (!name){
                return;
            }
            if (this.mdl.alias){
                return;
            }
            this.getPinyin(name).then(res => {
                //去除不可见的特殊符号
                if(res){
                    res=res.replace(/\u200B/g,'');
                }
                this.$set(this.mdl,"alias",res)
            })
        },
        get(id) {
            return FormChartComponentApi.get(id);
        },
        save() {
            this.$set(this.mdl,"dataModel",this.config.dataModel || "");
            this.$set(this.mdl,"dataModelName",this.config.dataModelName || "");
            this.$set(this.mdl,"config",JSON.stringify(this.config));
            return FormChartComponentApi.save(this.mdl);
        },
        getDataModel(value){
            if(value){
                ChartDataModelApi.get(value).then(res =>{
                    if(res.data.tables || res.data.sqlMode){
                        if (res.data.modelConfig) {
                            this.modelConfig = JSON.parse(res.data.modelConfig);
                            this.getTableName();
                        }
                        this.config.dataModel=res.data.id;
                        this.config.dataModelName=res.data.name;
                        //拖拽里面清空
                        this.config.dimensions =[];
                        this.config.measures =[];
                        this.config.colorLegends =[];
                    }
                })
            }
        },
        getTableName(){
            //添加表判断
            for(var obj of this.modelConfig.dimensions){
                if(obj.fields){
                    for(var obj_children of obj.fields){
                        this.$set(obj_children,'tableName',obj.tableName)
                    }
                }
            }
            //添加度量判断
            for(var obj of this.modelConfig.measures){
                if(obj.fields){
                    for(var obj_children of obj.fields){
                        this.$set(obj_children,'tableName',obj.tableName)
                    }
                }
            }
        },
        //设置图表类型
        setReportType(type) {
            this.config.reportType = type;
            //饼图需清空颜色图例
            if (type == 'pie') {
                this.config.colorLegends = [];
            }
            //折柱混搭 需要将度量存到measureList
            if (type == 'lineBar') {
                if (!this.config.measureList) {
                    this.config.measureList = [];
                }
                this.config.measureList.push(this.config.measures);
                this.config.measures = [];
            } else {
                this.config.measureList = [];
            }
            //地图
            if(type == 'map'){
                //默认全国地图
                this.$set(this.config,"mapType","china");
                //颜色图例
                this.$set(this.config,"isLegend",false);
                //可视化
                this.$set(this.config,"visualMap",true);
            }else {
                delete this.config.mapType;
                delete this.config.isLegend;
                delete this.config.visualMap;
            }
        },
        setPropertySetting(data){
            this.config.colour=data.colour;
        },
        setConfig(config){
            this.$set(this,"config",config);
        },
        setModelConfig(modelConfig){
            this.$set(this,"modelConfig",modelConfig);
        }

    }
}
</script>
<style scoped>
.rxDialogsbox-edit >>> .buttongmodle{
    display: flex;
    width: 100%;
}
.rxDialogsbox-edit>>>.footerToolBar{
    flex: 1;
    margin-right: 20px;
}
.chart-view-config{
    width: calc(100% - 40px);
    margin: auto;
    margin-top: 15px;
    height: calc(100% - 100px);
    overflow: hidden;
}
.dragiconfont {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 17px;
    width: 17px;
    border: 10px solid;
    border-color: #5b8fff #5b8fff transparent transparent;
}

.dragiconfont i {
    float: left;
    margin-top: -12px;
    margin-left: -1px;
    font-size: 12px;
    color: white;
}
.chart-view-common-show{
    border: solid 1px #5b8fff;
}
.chart-view-common-type-list{
    width: 69px;
    height: 69px;
    background-color: #ffffff;
    margin-right: 10px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    cursor: pointer;
    position: relative;
}
.chart-view-common-type-list:hover{
    border: solid 1px #5b8fff;
}
.chart-view-common-type-list img{
    width: 29px;
    margin-top: 10px;
}
.chart-view-common-type-list span{
    text-align: center;
    font-size: 12px;
    color: #808080;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 100%;
    padding: 0px 5px;
}
.chart-view-common-type{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-items: center;
    margin-left: 20px;
}
.chart-view-common{
    background-color: #f0f2f5;
}
.rxDialogsbox-edit-tab >>> .ant-tabs-tab{
    padding: 0px 12px!important;
    margin: 10px 0px!important;
}
.rxDialogsbox-edit >>>.footerToolBar{
    margin-top: -4px;
    float: left;
}
.formCustomized-common{
    width: 100%;
    height: 100%;
    display: flex;
}
.formCustomized-common >div{
}
.formCustomized-common >div:nth-child(1){
    width: 217px;
    border: 1px solid #dadde0;
    border-left: none;
    padding: 0px 15px;
}
.formCustomized-common >div:nth-child(2){
    width: 276px;
    border: 1px solid #dadde0;
    border-left: none;
}
.formCustomized-common >div:nth-child(3){
    width: calc(100% - 403px);
    overflow: auto;
}
.relick a {
    margin-right: 10px;
}
.rxDialogsbox-edit >>> .buttongmodle {
    position: relative;
}
.rxDialogsbox-edit>>>.defaultContent{
    z-index: 9;
}
.rxDialogsbox-edit>>>.ant-select-tree-node-content-wrapper{
    text-align: left;
}
</style>
